<template>
  <div>
    <el-row >
      <el-col :span="7">
        商品名：
        <el-input style="width: 200px;" v-model="queryObj.goodsName" placeholder="输入商品名"/>
      </el-col>
      <el-col :span="7">
        商品类型：
        <el-select v-model="queryObj.type" class="m-2" placeholder="选择类型" size="large">
          <el-option
              v-for="item in types"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        商品品牌：
        <el-select v-model="queryObj.brand" class="m-2" placeholder="选择品牌" size="large">
          <el-option
              v-for="item in brands"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="findStore(1)">搜索</el-button>
      </el-col>
    </el-row>


    <el-table :data="storeList" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <span>商品详情</span>
          <el-table :data="props.row.goodsInfoList" stripe style="margin-left: 20px">
            <el-table-column label="颜色" prop="color"/>
            <el-table-column label="大小" prop="size"/>
            <el-table-column label="单价" prop="price"/>
            <el-table-column label="数量" prop="num"/>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" @click="handleEdit(scope.$index, scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="商品编号" prop="goodsId"/>
      <el-table-column label="商品名称" prop="goodsName"/>
      <el-table-column label="商品品牌" prop="brand"/>
      <el-table-column label="商品类型" prop="type"/>
      <el-table-column label="商品总数" prop="num"/>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleEdit(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>


    <div style="margin-top: 40px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="findStore"
      />
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      storeList: [],
      total: 0,
      currentPage: 1,
      pageSize:6,
      queryObj: {goodsName: '', type: '', brand: ''},
      types:[],
      brands:[]
    }
  },
  methods: {
    findStore(pageNO) {
      this.currentPage=pageNO
      this.queryObj.pageNO = pageNO;
      axios.get("/project/store/cutByItem", {params: this.queryObj}).then(resp => {
        let cutObj = resp.data.data
        this.storeList = cutObj.records
        this.total=cutObj.total
        this.pageSize=cutObj.size
        console.log(cutObj)
      })
    },
    getTypes() {
      axios.get("/project/store/findAllType").then(resp => {
        this.types = resp.data.data
      })
    },
    getBrands() {
      axios.get("/project/store/findAllBrand").then(resp => {
        this.brands = resp.data.data
      })
    }
  }, created() {
    this.getTypes()
    this.getBrands()
    this.findStore(1)
  }
}
</script>

<style scoped>
.el-col{
  display: flex;
  align-items: center;
}
.el-row{
  margin: 40px 0;
}
</style>